<template>
  <view class="page">
    <scroll-view scroll-x="true" class="nav-wrap">
      <view class="item"></view>
      <view class="item"></view>
      <view class="item"></view>
      <view class="item"></view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .page {
    width: 100%;
    height: 100vh;
  }

  .nav-wrap {
    width: 600rpx;
    height: 200rpx;
    border: 1px solid #007aff;
    overflow: hidden;
    white-space: nowrap ;
  }
  .nav-wrap .item {
    width: 200rpx;
    height: 100%;
    background-color: #FF0000;
    margin-left: 20rpx;
    display: inline-block;
  }
</style>